"use server";

import "./index.css";
import { Avatar, Button, Card } from "antd";
import { getQuestionBankVoByIdUsingGet } from "@/api/questionBankController";
import Link from "next/link";
import Meta from "antd/es/card/Meta";
import Title from "antd/es/typography/Title";
import QuestionTable from "@/components/QuestionTable";
import Paragraph from "antd/es/typography/Paragraph";
import { first } from "lodash-es";
import QuestionTableForBank from "@/components/QuestionTableForBank";

export default async function QuestionBank({ params }) {
  const { questionBankId } = params;

  // 查询题库信息
  let questionBank = undefined;
  try {
    const res = await getQuestionBankVoByIdUsingGet({
      id: questionBankId,
      needQueryQuestionList: true,
      pageSize: 20,
    });
    questionBank = res.data;
  } catch (e) {}

  if (!questionBank) {
    return <div>查询题库失败</div>;
  }

  let firstQuestionId;
  if (
    questionBank?.questionPage?.records &&
    questionBank.questionPage.records.length > 0
  ) {
    firstQuestionId = questionBank.questionPage.records[0].id;
  }
  return (
    <div id={"questionBank"} className={"limit-width"}>
      <Card>
        <Meta
          avatar={<Avatar src={questionBank.picture} size={108} />}
          title={<Title level={2}>{questionBank.title}</Title>}
          description={
            <>
              <Paragraph>{questionBank.description}</Paragraph>
              <Button
                target="_blank"
                href={`/questionBank/${questionBankId}/question/${firstQuestionId}`}
                type={"primary"}
                shape={"round"}
                disabled={!firstQuestionId}
              >
                开始刷题
              </Button>
            </>
          }
        />
      </Card>
      <div style={{ height: 20 }} />
      <QuestionTableForBank
        defaultQuestionList={questionBank.questionPage.records}
        defaultTotal={questionBank.questionPage.total}
        questionBankId={questionBankId}
      />
    </div>
  );
}
